<template>
  <router-view></router-view>
  <div v-show="$route.meta.showFather">
    <div style="padding: 30px 30px">
      <div class="title">
        <!-- <el-divider direction="vertical" /> -->
        订单列表
      </div>
      <el-divider border-style="double" />
      <div class="orderBody">
        <el-tabs
          v-model="activeName"
          class="demo-tabs"
          @tab-click="handleClick"
        >
          <el-tab-pane
            lazy
            v-for="(item, index) in menuTitle"
            :key="index"
            :label="item.label"
            :name="item.value"
          >
          </el-tab-pane>
          <div class="orderStyle">
              <div
                style="
                  padding-bottom: 10px;
                "
              >
                <el-table
                  :data="order"
                  border
                  stripe
                  :header-cell-style="{
                    'text-align': 'center',
                    color: '#515a6e',
                    background: '#f8f8f9',
                  }"
                  :cell-style="{ 'text-align': 'center' }"
                  style="font-size: 16px"
                >
                  <el-table-column
                    label="流水号"
                    prop="id"
                    min-width="220"
                  ></el-table-column>
                  <el-table-column label="份数" width="100">
                    <template #default="scope">
                      <span
                        :style="scope.row.totalCopies >= 5 ? 'color:red' : ''"
                        >{{ scope.row.totalCopies }}</span
                      >
                    </template>
                  </el-table-column>
                  <el-table-column label="状态" width="150">
                    <template #default="scope">
                      <span
                        v-if="scope.row.status == '0'"
                        style="color: rgb(167, 167, 80)"
                        >待支付</span
                      >
                      <span
                        v-if="scope.row.status == '1'"
                        style="color: rgb(47, 186, 233)"
                        >待商家接单</span
                      >
                      <span v-if="scope.row.status == '2'" style="color: blue"
                        >待派送</span
                      >
                      <span
                        v-if="scope.row.status == '3'"
                        style="color: rgb(245, 17, 150)"
                        >已派送</span
                      >
                      <span
                        v-if="scope.row.status == '4'"
                        style="color: rgb(75, 75, 253)"
                        >已完成</span
                      >
                      <span v-if="scope.row.status == '5'" style="color: red"
                        >失败订单</span
                      >
                    </template>
                  </el-table-column>
                  <el-table-column label="金额(元)" width="150">
                    <template #default="scope">
                      <span
                        :style="scope.row.amount >= 100 ? 'color:red' : ''"
                        >{{ scope.row.amount }}</span
                      >
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="收货地址"
                    prop="address"
                    width="300"
                  ></el-table-column>
                  <el-table-column
                    label="下单时间"
                    prop="orderTime"
                    width="200"
                  ></el-table-column>
                  <el-table-column label="操作" width="150" fixed="right">
                    <template #default="scope">
                      <el-button
                        style="font-size: 14px; border-radius: 8px"
                        type="primary"
                        size="small"
                        @click="detail(scope)"
                      >
                        详情
                      </el-button>
                    </template>
                  </el-table-column>
                  ></el-table
                >
                <div style="margin: 30px 0px 20px 0">
                  <el-pagination
                    background
                    v-model:current-page="queryInfo.pageNum"
                    v-model:page-size="queryInfo.pageSize"
                    :page-sizes="[10, 20, 30, 40]"
                    :small="small"
                    style="justify-content: right"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="queryInfo.total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                  />
                </div>
              </div>
          
          </div>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ordersList } from "@/api/order";


export default {
  name: "order",
  
  setup() {
    const router = new useRouter();
    const route = new useRoute();
    let data = reactive({
      order:"",
      activeName: "", //默认标签
      queryInfo: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      //标签标题
      menuTitle: [
        { label: "全部订单", value: "" },
        { label: "待支付", value: "0" },
        { label: "待商家接单", value: "1" },
        { label: "待派送", value: "2" },
        { label: "已派送", value: "3" },
        { label: "已完成", value: "4" },
        { label: "失败订单", value: "5" },
      ],
    });

    //点击标签
    let handleClick = (target) => {
      data.activeName = target.props.name;
      orders()
    };

    let orders=()=>{
      let params = {
          pageNum: data.queryInfo.pageNum,
          pageSize: data.queryInfo.pageSize,
          userId: JSON.parse(localStorage.getItem("userInfo")).id,
          status: data.activeName,
        };
        ordersList(params).then((res) => {
          data.order = res.listData;
          data.queryInfo.total = res.total;
        });
    }
    orders()

    watch(
      route,()=>{
        orders();
    });

    //点击详情按钮
    let detail = (scope) => {
      router.push({ name: "orderDetail",query:{id:scope.row.id}});
      // emit("getId",scope.row.id)
    };

    //监听 pagesize 改变的事件
    let handleSizeChange = (newSize) => {
      console.log(newSize);
      data.queryInfo.pageSize = newSize; //重新指定每页数据量
      orders(); //带着新的分页请求获取数据
    };
    //监听 页码值 改变的事件
    let handleCurrentChange = (newPage) => {
      console.log(newPage);
      data.queryInfo.pageNum = newPage; //重新指定当前页
      orders(); //带着新的分页请求获取数据
    };

    return {
      ...toRefs(data),
      handleClick,
      handleSizeChange,
      handleCurrentChange,
      detail,
      orders
    };
  },
};
</script>

<style scoped>
.title {
  /* color: #2d8cf0; */
  font-weight: 600;
  font-size: 18px;
  margin: 0 0 10px 0px;
  line-height: 18px;
  margin-bottom: 20px;
}

::v-deep .demo-tabs > .el-tabs__content {
  padding: 10px 0;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.orderBody {
  /* border: 1px solid #f0eeee; */
}
</style>